<template>
  <div class="mod-menu">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="全部订单" name="0"></el-tab-pane>
      <el-tab-pane label="待发货订单" name="1"></el-tab-pane>
      <!-- <el-tab-pane label="待备货订单" name="2"></el-tab-pane> -->
      <el-tab-pane label="待收货订单" name="3"></el-tab-pane>
      <!-- <el-tab-pane label="待自提订单" name="4"></el-tab-pane> -->
    </el-tabs>
    <div class="mt30">
      <el-form :inline="true" :model="params">
        <el-form-item label="订单编号">
          <el-input v-model="params.order_code" placeholder="请输入订单编号" clearable></el-input>
        </el-form-item>
        <el-form-item label="支付订单号">
          <el-input v-model="params.pay_order_code" placeholder="请输入支付订单号" clearable></el-input>
        </el-form-item>
        <el-form-item label="收货人">
          <el-input v-model="params.receiver" placeholder="请输入收货人姓名" clearable></el-input>
        </el-form-item>
        <el-form-item label="收货人手机号码">
          <el-input v-model="params.mobile" type="number" placeholder="请输入收货人手机号码" clearable></el-input>
        </el-form-item>
        <!-- <el-form-item label="店铺名称">
          <el-input v-model="params.shop_name" placeholder="请输入店铺名称" clearable></el-input>
        </el-form-item> -->
        <el-form-item label="订单类型">
          <el-select v-model="params.marketing_type" clearable placeholder="请选择订单类型">
            <el-option label="商家订单" :value="0"></el-option>
            <el-option label="秒杀订单" :value="1"></el-option>
            <el-option label="拼团订单" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="loadListClick()">查询</el-button>
          <el-button type="primary" @click="exportAll()">导出数据</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="table-data" v-loading="tableLoading">
      <div v-for="(item, index) in dataList" :key="index" v-if="dataList.length > 0">
        <div class="title-div">
          <div class="flexcenter">
            <span>订单号：{{ item.order_code }}</span>
            <span class="ml10">支付订单号：{{ item.pay_order_code }}</span>
            <div class="ml10 text-1">店铺名称：{{ item.shop_name }}</div>
            <label class="ml10 wechatpay" v-if="item.exchange"> 积分兑换</label>

            <label class="ml10" v-if="item.exchange && item.total_amount > 0">+</label>

            <template v-if="item.total_amount > 0 && item.transaction_status != 0">
              <label class="ml10" :class="
                item.pay_mode == 1
                  ? 'wechatpay'
                  : item.pay_mode == 2
                    ? 'alipay'
                    : 'platformpay'
              ">
                <!-- {{
                  item.pay_mode == 1
                    ? '微信支付'
                    : item.pay_mode == 2
                    ? '支付宝支付'
                    : '余额支付'
                }} -->
                <span v-if="item.pay_mode == 1">微信支付</span>
                <span v-if="item.pay_mode == 2">支付宝支付</span>
                <span v-if="item.pay_mode == 0">余额支付</span>
                <span v-if="item.pay_mode == 10">支付宝支付(Adapay)</span>
                <span v-if="item.pay_mode == 12">支付宝支付(慧收钱)</span>
                <span v-if="item.pay_mode == 14">银行卡支付</span>
              </label>
            </template>
          </div>
          <div v-if="item.operator">
            <el-button class="c-info" type="text" size="small" @click="viewHandle(item)">查看</el-button>
          </div>
        </div>
        <div class="table-content" v-for="(v, i) in item.child_order_list" :key="i">
          <div class="goods-info">
            <div class="good-img-div">
              <img :src="v.goods_img" />
            </div>
            <div class="info">
              <div class="goods-title">{{ v.goods_title }}</div>
              <div class="price" v-if="v.exchange">{{ v.total_point }}积分</div>
              <div class="price" v-else>
                ￥
                <input :class="currUpdate == v.id ? 'can-input' : ''" :readonly="item.transaction_status == 0 && currUpdate != v.id" v-model="v.real_price" />
                <!-- <i @click="updatePrice(v)" v-if="item.transaction_status==0&&currUpdate!=v.id" class="el-icon-edit"></i> -->
                <i @click="submitPrice(v)" v-if="item.transaction_status == 0 && currUpdate == v.id" class="el-icon-check"></i>
              </div>

              <div class="remark">{{ v.sku_set_name }}</div>
            </div>
          </div>
          <div class="tc">
            <div v-if="v.exchange">{{ v.total_point }}积分</div>
            <div v-else>{{ v.total_real_price }}</div>
            <div>({{ v.number }}{{ v.unit }})</div>
          </div>
          <div class="tc">
            <div v-if="item.receipt">{{ item.receipt.receiver }}</div>
            <div v-if="item.receipt">
              {{ item.receipt && item.receipt.mobile }}
            </div>
            <div v-if="item.self_take">{{ item.self_take.receiver }}</div>
            <div v-if="item.self_take">{{ item.self_take.mobile }}</div>
          </div>
          <div class="tc">
            <el-tag>
              {{
                v.marketing_type == 1
                ? '秒杀订单'
                : v.marketing_type == 2
                  ? '拼团订单'
                  : '商家订单'
              }}
            </el-tag>
          </div>
          <div class="tc">
            <el-tag type="primary" v-if="v.transaction_status == 0">待支付</el-tag>
            <el-tag type="warning" v-if="item.marketing_type == 2">{{
              item.team.status < 2 ? '待成团' : item.team.status > 2
              ? '拼团失败'
              : '拼团成功'
            }}</el-tag>
            <el-tag type="warning" v-if="
              v.transaction_status == 1 &&
              v.rights_status == 0 &&
              item.effective
            ">{{ item.shipment_mode == 1 ? '待备货' : '待发货' }}</el-tag>
            <el-tag type="warning" v-if="
              v.transaction_status == 2 &&
              v.rights_status == 0 &&
              item.effective
            ">{{ item.shipment_mode == 1 ? '部分备货' : '部分发货' }}</el-tag>
            <el-tag type="danger" v-if="v.transaction_status == 3 && v.rights_status == 0">{{ item.shipment_mode == 1 ? '待自提' : '待收货' }}</el-tag>
            <el-tag type="success" v-if="v.transaction_status == 5 && v.rights_status == 0">交易完成</el-tag>
            <el-tag type="info" v-if="v.transaction_status == 6 || v.rights_status == 2">关闭</el-tag>
            <el-tag type="info" v-if="v.rights_status == 1">维权中</el-tag>
          </div>
          <div class="tc">
            {{ v.create_time }}
          </div>
        </div>
        <div class="table-foot">
          <label class="freight" v-if="item.first_order_reduced">首单优惠：<label>￥{{ item.first_order_reduced }}</label></label>
          <label class="ml10 freight">{{
            item.real_freight ? '运费：￥' + item.real_freight : '免运费'
          }}</label>
          <label class="ml10" v-if="item.total_amount > 0">实付金额：<label class="price">￥ {{ item.total_amount }}</label></label>
          <label class="ml10" v-if="item.total_point > 0">实付积分：<label> {{ item.total_point }}</label></label>
        </div>
      </div>
    </div>
    <div v-if="dataList.length == 0" class="no-data">
      暂无数据
    </div>
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="params.page" :page-sizes="[10, 20, 30, 50]"
      :page-size="params.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
    </el-pagination>

    <!-- 详情 -->
    <el-dialog :title="`订单[${info.order_code}]的详情`" top="5vh" :visible.sync="dialogVisible" width="60%">
      <orderDetail ref="orderDetail"></orderDetail>
    </el-dialog>
  </div>
</template>

<script>
import Vue from 'vue'
import orderService from '@/api/orderService.js'

import orderDetail from '@/views/modules/merchant/order/orderDetail.vue'
import axios from 'axios'
export default {
  data () {
    return {
      params: {
        limit: 10,
        page: 1,
        transaction_status: null, // 交易状态
        marketing_type: '', // 秒杀&拼团
        order_code: '', // 订单编号
        shipment_mode: null, // 出货方式
        pay_order_code: '', // 支付订单号
        receiver: '', // 收货人
        mobile: '', // 收货人手机
        shop_name: '' // 店铺名称
      },
      total: null,
      activeName: 0,
      dataList: [],
      tableLoading: false,
      dataListLoading: false,
      addOrUpdateVisible: false,
      deliverGoods: false, // 发货
      verification: false, // 核销
      info: {},
      dialogVisible: false,
      goodStreamVisible: false, // 物流详情
      currUpdate: null,
      editPriceParam: {
        order_id: null,
        child_order_id: null,
        result_price: null
      },
      importAction: '',
      uploadData: ''
    }
  },
  components: {
    orderDetail,
  },
  created () {
    ; (this.importAction =
      this.$config.SERVER_URL + '/admin/saleorder/import_ship'),
      (this.uploadData = {
        token: Vue.cookie.get('token')
      })
    this.loadList()
  },
  methods: {
    // 导出数据
    exportAll () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          window.location.href = `${this.$config.SERVER_URL}/admin/saleorder/export?order_code=${this.params.order_code}&shipment_mode=${this.params.shipment_mode}&transaction_status=${this.params.transaction_status}&pay_order_code=${this.params.pay_order_code}&mobile=${this.params.mobile}&receiver=${this.params.receiver}&shop_name=${this.params.shop_name}&marketing_type=${this.params.marketing_type}&token=${token}`
        })
        .catch(() => { })
    },
    loadListClick () {
      this.params.page = 1
      this.loadList()
    },
    init () {
      this.params = {
        limit: 10,
        page: 1,
        transaction_status: null, // 交易状态
        marketing_type: '', // 秒杀&拼团
        order_code: '', // 订单编号
        shipment_mode: null, // 出货方式
        pay_order_code: '', // 支付订单号
        receiver: '', // 收货人
        mobile: '' // 收货人手机
      }
    },
    loadList () {
      this.tableLoading = true
      orderService
        .areaagentOrderList(this.params)
        .then(res => {
          if (res.data && res.data.code == 200) {
            this.dataList = res.data.page.list
            this.total = res.data.page.totalCount
          }
          this.tableLoading = false
        })
        .then(res => {
          this.tableLoading = false
        })
    },

    // 导出待发货订单
    deliveryOrderexport () {
      this.$confirm(`确定进行导出操作吗?`, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          let token = Vue.cookie.get('token')
          window.location.href = `${this.$config.SERVER_URL}/admin/saleorder/export/waitship?token=${token}&transaction_status=${this.params.transaction_status}&marketing_type=${this.params.marketing_type}&order_code=${this.params.order_code}&shipment_mode=${this.params.shipment_mode}&pay_order_code=${this.params.pay_order_code}&receiver=${this.params.receiver}&mobile=${this.params.mobile}`
        })
        .catch(() => { })
    },



    handleClick (e) {
      this.init()
      if (e.name == 0) {
        this.params.transaction_status = null
        this.params.shipment_mode = null
      } else if (e.name == 1) {
        // 待发货
        this.params.transaction_status = 1
        this.params.shipment_mode = 0
      } else if (e.name == 2) {
        // 待备货
        this.params.transaction_status = 1
        this.params.shipment_mode = 1
      } else if (e.name == 3) {
        // 待收货
        this.params.transaction_status = 3
        this.params.shipment_mode = 0
      } else if (e.name == 4) {
        // 待自提
        this.params.transaction_status = 3
        this.params.shipment_mode = 1
      }
      this.loadList()
    },
    handleSizeChange (e) {
      this.params.limit = e
      this.params.page = 1
      this.loadList()
    },
    handleCurrentChange (e) {
      this.params.page = e
      this.loadList()
    },
    result (e) {
      this[e] = false
      this.loadList()
    },
    onchangeInput (e) {
      // console.log(e)
      this.inputValue = e.replace(/[^\d.]/g, '')
    },

    /**
     * 查看详情
     * */
    viewHandle (item) {
      this.info = item
      this.dialogVisible = true
      orderService.platformOrderInfo(item.id).then(res => {
        if (res.data && res.data.code == 200) {
          this.$refs.orderDetail.init(res.data.data)
        }
      })
    },


    submitPrice (v) {
      let rex = /^(0|[1-9]\d*)(\s|$|\.\d{1,2}\b)/
      let val = v.real_price * 1
      if (val <= 0) {
        this.$message.warning('金额需大于0')
        return false
      }
      if (!rex.test(val)) {
        this.$message.warning('金额需两位小数')
        return false
      }
      this.editPriceParam.result_price = v.real_price
      console.log(this.editPriceParam)
      orderService.updatePrice(this.editPriceParam).then(res => {
        if (res.data && res.data.code == 200) {
          this.$message.success('修改成功！')
          this.currUpdate = null
        }
      })
    },

  }
}
</script>
<style scoped lang="scss">
.mt30 {
  margin-top: 30px;
}

.good-img-div {
  img {
    width: 85px;
    height: 85px;
    display: flex;
  }
}

.flexcenter {
  display: flex;
  align-items: center;
}

.text-1 {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  max-width: 300px;
}

.flex_bet {
  display: flex;
  justify-content: space-between;
}

.title-div {
  padding: 0 30px;
  height: 40px;
  background-color: #e5e5e5;
  color: #333333;
  line-height: 40px;
  font-size: 14px;
  display: flex;
  justify-content: space-between;
}

.tc {
  text-align: center;
}

.table-data {
  .alipay {
    color: #009fe8;
  }

  .wechatpay {
    color: #1aad19;
  }

  .platformpay {
    color: #17b3a3;
  }

  >div {
    border: 1px solid #f0f0f0;
  }

  .table-content {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid #f0f0f0;

    >div {
      min-width: 15%;
    }

    .goods-info {
      display: flex;
      align-items: center;
      width: 20%;

      .info {
        text-align: left;
        margin-left: 10px;
        width: 60%;
      }

      .goods-title {
        font-size: 14px;
        height: 30px;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
      }

      .remark {
        font-size: 12px;
        color: #b1b1b1;
      }

      .price {
        font-size: 14px;
        color: #f3415f;
        margin-bottom: 15px;
        display: flex;
        align-items: center;

        i {
          cursor: pointer;
        }
      }

      .price>input {
        border: none;
        color: #f3415f;
        width: auto;
        width: 50%;
        padding: 5px;
        margin: 0 2px;
        box-sizing: border-box;
        // transition: all .3s;
      }

      input:focus {
        outline: unset;
      }
    }
  }

  .table-foot {
    height: 40px;
    text-align: right;
    color: #333333;
    line-height: 40px;
    font-size: 14px;
    padding: 0 15px;

    .price {
      color: #f3415f;
    }

    .freight {
      color: #b1b1b1;
      margin-right: 10px;
    }
  }
}

.ml10 {
  margin-left: 10px;
}

.can-input {
  border: 1px solid #dfdfdf !important;
  border-radius: 2px;
}
</style>
